<template>
  <div>
    <SearchBar inline>
      <template #normal>
        <el-form-item label="模板名称">
          <el-input v-model="tableForm.name" clearable placeholder="请输入模板名称"></el-input>
        </el-form-item>
        <el-form-item label="模板内容">
          <el-input v-model="tableForm.content" clearable placeholder="请输入搜索关键词"></el-input>
        </el-form-item>
        <!--        <ins-cascader-filter @change="(value) => tableForm.queryInsIds = value"></ins-cascader-filter>-->
      </template>
      <template #toolbar>
        <el-form-item>
          <!-- <el-button @click="resetForm">重置</el-button>-->
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button type="primary" @click="isAdd = true" v-has="['03030204']">新建邮件模板</el-button>
        </el-form-item>
      </template>
    </SearchBar>

    <!--    <MainContentActionsWrapper>-->
    <!--      <el-button type="primary" @click="isAdd = true">新建邮件模板</el-button>-->
    <!--    </MainContentActionsWrapper>-->

    <div class="_content_list">
      <!--      <div class="clueList">-->
      <!--        &lt;!&ndash; <div class="clueList-title">模板列表</div> &ndash;&gt;-->
      <!--        <div class="fr">-->
      <!--          <el-button type="primary" @click="isAdd = true">新建邮件模板</el-button>-->
      <!--        </div>-->
      <!--        <div class="clear-both"></div>-->
      <!--      </div>-->
      <LayoutTable ref="tableList" url="/reach/reachMailTemplateEntity/pageList" disable-auto-height :param="tableForm">
        <el-table-column prop="reachId" label="模板ID" min-width="150"></el-table-column>
        <el-table-column prop="name" label="模板名称" min-width="150"></el-table-column>

        <!-- <el-table-column
          prop="name"
          label="模板内容"
          min-width="150"
        ></el-table-column> -->
        <el-table-column prop="title" label="邮件名称" min-width="150"></el-table-column>

        <el-table-column prop="remark" label="备注" min-width="150"></el-table-column>

        <el-table-column prop="createTime" label="创建时间" min-width="150">
          <template #default="scope">
            <div>
              {{ $filters.dateFormat(scope.row.createTime) }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="name"
          label="创建人"
          min-width="150"
        ></el-table-column> -->
        <el-table-column label="操作" width="150" v-has="['03030201', '03030205', '03030206']">
          <template #default="scope">
            <div>
              <el-button link type="primary" @click="toEditor(scope.row)" v-has="['03030205']">
                详情
              </el-button>
              <el-button link type="primary" @click="copy(scope.row)" v-has="['03030201']"> 复制 </el-button>
              <el-button link type="primary" @click="del(scope.row)" v-has="['03030206']">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </LayoutTable>
    </div>
    <add-template @confirmAdd="confirmAdd" @cancelAdd="cancelAdd" :addData="addData" :isAdd="isAdd"></add-template>
  </div>
</template>
<script>
import reachPipelineApi from "@/api/reachPipelineApi";
import addTemplate from "./addTemplate.vue";
export default {
  components: { addTemplate },

  data() {
    return {
      url: "",
      isAdd: false,
      typeFilters: {},
      addData: { id: null },
      tableForm: {
        name: "",
        content: "",
        queryInsIds: [],
      },
    };
  },
  methods: {
    toEditor(row) {
      this.isAdd = true;
      this.addData = JSON.parse(JSON.stringify(row));
    },
    copy(row) {
      this.isAdd = true;
      let params = JSON.parse(JSON.stringify(row));
      params.id = null;
      this.addData = params;
    },
    confirmAdd() {
      this.onSearch();
      this.cancelAdd();
    },
    cancelAdd() {
      this.isAdd = false;
      this.addData = { id: null };
    },
    async delEmailTemplate(row) {
      let rs = await reachPipelineApi.delEmailTemplate({ id: row.id, name: row.name });
      if (rs.code === 200) {
        ElMessage.success("删除成功");
        this.onSearch();
      }
    },
    onSearch() {
      this.$nextTick(() => {
        this.$refs.tableList.search();
      });
    },

    del(row) {
      console.log('row', row)
      this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delEmailTemplate(row);
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    resetForm() {
      this.tableForm = {
        name: "",
        content: "",
      };
      this.onSearch();
    },
  },
};
</script>
<style lang="scss" scoped>
.clueList {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 700;
  color: #2c313b;

  &-title {
    display: inline-block;

    span {
      font-weight: normal;
      font-size: 14px;
      margin-left: 10px;

      i {
        color: #6178ff;
        font-style: initial;
        margin: 3px;
      }
    }
  }
}

//._content_list {
//  background: #fff;
//  padding: 16px 24px;
//}
</style>
